<template>
	<el-main>
		<div>登录用户：{{userInfo.username || '未登录'}}</div>
		<!-- 查询框 -->
		<el-form :inline="true" :model="queryForm" class="demo-form-inline">
		  <el-form-item label="姓名">
		    <el-input v-model="queryForm.name" placeholder="姓名"></el-input>
		  </el-form-item>
		  <el-form-item label="班级">
		    <el-select v-model="queryForm.classesId" placeholder="选择班级" clearable="">
		      <el-option v-bind:label="classes.name" :value="classes.id" v-for="classes in classesList"></el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="querySubmit">查询</el-button>
		  </el-form-item>
		</el-form>
		<!-- 列表 -->
		<el-table
		  :data="tableData"
		  @selection-change="handleSelectionChange"
		  style="width: 100%">
		  <!-- 多选 -->
		  <el-table-column
		  type="selection"
		  ></el-table-column>
		  
		  <el-table-column
		  label="#" prop="id"
		  width="50"
		  ></el-table-column>
		  
		  <el-table-column
			prop="name"
			label="姓名"
			width="50">
		  </el-table-column>
		  
		  <el-table-column label="头像">
			  <template slot-scope="scope">
				  <!-- <el-avatar :size="60" :src="scope.row.headerImg"></el-avatar> -->
				<img :src="scope.row.headerImg" height="50px;" />
			  </template>
		  </el-table-column>
		  
		  <el-table-column label="性别">
			  <template slot-scope="scope">
				  {{scope.row.sex==1?'男':'女'}}
			  </template>
		  </el-table-column>
		  <el-table-column
			prop="age"
			label="年龄"
			width="50">
		  </el-table-column>
		  <el-table-column
			prop="birthday"
			label="生日"
			width="150">
		  </el-table-column>
		  
		  <el-table-column
		  			prop="hobbyNames"
		  			label="爱好"
		  			width="150">
		  </el-table-column>
		  
		  <el-table-column label="所属班级" width="80">
			  <template slot-scope="scope">
				  <span v-for="classes in classesList" v-if="classes.id==scope.row.classesId">{{classes.name}}</span>
			  </template>
		  </el-table-column>
		  
		  <el-table-column label="所属地区" width="100">
			  <template slot-scope="scope">
				  {{scope.row.proviceName}}/{{scope.row.cityName}}/{{scope.row.areaName}}
			  </template>
		  </el-table-column>
		  
		  <el-table-column label="创建时间" prop="createTime">
		  </el-table-column>
		  <!-- 分页 -->
		  <el-table-column label="操作">
			  <template slot-scope="scope">
				  <el-button size="mini" @click="edit(scope.row.id)">编辑</el-button>
				  <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
			  </template>
		  </el-table-column>
		  
		</el-table>
		
		<el-pagination
		  :page-count="pageCount"
		  :current-page="queryForm.pageNum"
		  @current-change="gotoPage"
		  layout="prev, pager, next">
		</el-pagination>
		
		<div>
			<el-button size="mini" type="danger" @click="batchDel()">批删</el-button>
			<el-button size="mini" @click="add">添加</el-button>
			<el-button size="mini" @click="addClasses">添加班级</el-button>
		</div>
		
		
		<!-- 对话框添加班级信息 -->
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="50%"
		  :before-close="handleClose">
		  <div>
			  <el-form>
				  <el-form-item label="班级名称">
					  <div v-for="(classes,index) in classesList">
							<el-input v-model="classes.name" placeholder="请输入班级名称" ></el-input>
							<el-button type="danger" @click="delCls(index)">删除</el-button>
					  </div>
				  </el-form-item>
			  </el-form>
			  <el-button type="mini" @click="addCls">添加班级</el-button>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="saveClasses">确 定</el-button>
		  </span>
		</el-dialog>
	</el-main>
</template>

<script>
	export default {
		data(){
			return {
				//查询条件
				queryForm:{
					pageNum:1,
					pageSize:2
				},
				//列表数据
				tableData:[],
				//table选择数据Id数组
				selecteIds:[],
				//总页数
				pageCount:1,
				classesList:[],
				dialogVisible:false,
				classesForm:{},
				userInfo:{}
			}
		},
		methods:{
			handleClose(){
				this.dialogVisible = false;
			},
			addClasses(){
				this.dialogVisible = true;
			},
			//js添加一个班级输入框
			addCls(){
				this.classesList.push({name:null})
			},
			delCls(index){
				console.log(index);
				//js素组的删除
				this.classesList.splice(index,1);
				console.log(this.classesList);
			},
			saveClasses(){
				console.log(this.classesForm);
				//ajax提交班级信息
				/* this.axios.post("http://localhost:8090/classes/save",this.classesForm).then(res=>{
					if(res){
						//关闭对话框
						this.classesForm={};
						this.dialogVisible = false;
						this.$message({
							message:"添加成功",
							type:"success"
						});
					}
				}) */
				//let userInfoStr = localStorage.getItem("userInfo");
				//this.userInfo = JSON.parse(userInfoStr);
				//后台定义vo,接收classesList的数据
				this.axios.post("http://localhost:8090/classes/batchSave",{userId:this.userInfo.id,classesList:this.classesList}).then(res=>{
					if(res.data){
						this.dialogVisible = false;
						this.$message({
							message:"更新成功",
							type:"success"
						});
					}else{
						this.$message({
							message:"更新失败",
							type:"success"
						});
					}
				})
				
			},
			add(){
				this.$router.push("/update/0");
			},
			edit(id){
				console.log(id);
				this.$router.push("/update/"+id);
			},
			del(id){
				console.log(id)
				//调用ajax执行删除操作
				this.axios.post("http://localhost:8090/student/batchDel",{idList:[id]}).then(res=>{
					console.log(res);
					//刷新列表页
					if(res.data){
						this.querySubmit();
						this.$message("删除成功");
					}else{
						this.$message("删除失败");
					}
					
				})
			},
			batchDel(){
				//判断是否有选中的数据
				if(this.selecteIds.length==0){
					this.$message("请选择要删除数据");
					return;
				}
				//调用ajax执行删除操作
				this.axios.post("http://localhost:8090/student/batchDel",{idList:this.selecteIds}).then(res=>{
					console.log(res);
					//刷新列表页
					if(res.data){
						this.querySubmit();
						this.$message("删除成功");
					}else{
						this.$message("删除失败");
					}
					
				})
				
			},
			handleSelectionChange(rows){
				console.log(rows);
				// let ids = rows.map(function(row){return row.id});
				let ids = rows.map(row=>{return row.id});
				this.selecteIds = ids;
				console.log("selecteIds:"+this.selecteIds);
			},
			gotoPage(pageNum){
				this.queryForm.pageNum = pageNum;
				console.log(this.pageNum);
				this.list();
			},
			querySubmit(){
				//发送ajax请求，根据queryForm查询数据
				console.log(this.queryForm);
				this.queryForm.pageNum=1;
				this.list();
				
			},
			//列表页数据
			list(){
				//发送ajax请求，根据queryForm查询数据
				this.axios.get("http://localhost:8090/student/getPageInfo",{params:this.queryForm}).then(res=>{
					//axios封装了结果，res.data是我们接口的数据
					console.log(res.data);
					this.tableData = res.data.list;
					//设置分页数量、当前页
					this.pageCount = res.data.pages;
					this.queryForm.pageNum = res.data.pageNum;
				})
				/* console.log("list:",this.queryForm);
				this.tableData = [{
					id:1,
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				  },{
					id:2,
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				  }]; */
				
			},
			/* 查询所有班级 */
			listClasses(){
				this.axios.get("http://localhost:8090/classes/listAll").then(res=>{
					this.classesList = res.data;
				})
			}
		},
		created(){
			//get请求
			/* this.axios.get("http://localhost:8090/student/getPageInfo",{params:{id:1,name:"zhansan",pageSize:100}}).then(res=>{
				console.log(res.data)
			}) */
			//post请求,后台对象必须加@requetBody
			/* this.axios.post("http://localhost:8090/student/getPageInfo",{id:1,name:"zhansan"}).then(res=>{
				console.log(res.data)
			}) */
			//通过ajax加载列表页数据
			this.list();
			this.listClasses();
			//从localStorage获取用户信息
			let userInfoStr = localStorage.getItem("userInfo");
			if(userInfoStr){
				this.userInfo = JSON.parse(userInfoStr);
			}
		}
	}
</script>

<style scoped>

</style>
